<template>
    <div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
<!--                        <div class="layui-card-header">-->
<!--                            <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>-->
<!--                            <button class="layui-btn" @click="addClient()"><i class="layui-icon"></i>添加</button>-->
<!--                        </div>-->
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form">
                                <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>姓名</th>
                                    <th>密码</th>
                                    <th>部门</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in userData">
                                    <td>
                                        {{item.name}}
                                    </td>
                                    <td>
                                        {{item.realname}}
                                    </td>
                                    <td>
                                        {{item.psd}}
                                    </td>
                                    <td>
                                        {{item.dept}}
                                    </td>
                                    <td class="td-manage">
                                        <a title="编辑" class="layui-btn" @click.stop="openedit(item)" href="javascript:;">
                                            <i class="layui-icon">&#xe642;</i>
                                        </a>&nbsp
                                        <a title="删除" class="layui-btn layui-btn-danger" @click="member_del(this,item.id,item.client)" href="javascript:;">
                                            <i class="layui-icon">&#xe640;</i>
                                        </a>
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import { mapActions, mapState } from "vuex";
    import useredit from './user-edit'

    export default {
        data(){
            return{
            }
        },
        name: "user-list",
        created() {
            this.getUser();
        },
        computed:{
            ...mapState({
                userData:state=>state.userData,
            })
        },
        methods:{
            member_del(obj,id,client){
                let vm = this;
                layer.confirm('确认删除 '+client+' ？',function(){
                    vm.deleteUser(id);
                    setTimeout(vm.getUser,500);
                    layer.msg('已删除!',{icon:1,time:1000});
                });
            },
            openedit(item){
                this.$layer.open({
                    id:1,
                    type:2,
                    content: {
                        content: useredit, //传递的组件对象
                        parent: this,//当前的vue对象
                        data:{user:item}//props
                    },
                    area:['800px','600px'],
                    title: '编辑 '+item.name+' 的用户信息',
                    maxmin: true,
                });
            },
            addClient(){
                this.$layer.open({
                    id:1,
                    type:2,
                    content: {
                        content: memberadd, //传递的组件对象
                        parent: this,//当前的vue对象
                    },
                    area:['800px','600px'],
                    title: '添加新用户',
                    maxmin: true,
                });
            },
            ...mapActions(["getUser"])
        },
        mounted(){
            layui.use(['laydate','form'], function(){
                var laydate = layui.laydate;
                var  form = layui.form;


                // 监听全选
                form.on('checkbox(checkall)', function(data){

                    if(data.elem.checked){
                        $('tbody input').prop('checked',true);
                    }else{
                        $('tbody input').prop('checked',false);
                    }
                    form.render('checkbox');
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#start' //指定元素
                });

                //执行一个laydate实例
                laydate.render({
                    elem: '#end' //指定元素
                });


            });


            function delAll (argument) {
                var ids = [];

                // 获取选中的id
                $('tbody input').each(function(index, el) {
                    if($(this).prop('checked')){
                        ids.push($(this).val())
                    }
                });

                layer.confirm('确认要删除吗？'+ids.toString(),function(index){
                    //捉到所有被选中的，发异步进行删除
                    layer.msg('删除成功', {icon: 1});
                    $(".layui-form-checked").not('.header').parents('tr').remove();
                });
            }
        },
    }


</script>

<style scoped>

</style>